<template>
	<view class="bg_box" v-if="guideShow>0">
		<view class="modal_box" v-if="guideShow==1">
			<view class="connect_wechat">
				<span>请先绑定微信</span>
				<view class="icon">
					<img src="@/static/guess/wechat.png"/>
				</view>
				<view class="btn_wechat">
					<span @click="handlerClose">暂不绑定</span>
					<span @click="connectWechat">立即绑定</span>
				</view>
			</view>
		</view>	
		<view class="modal_box" v-if="guideShow==2">
			<view class="connect_wechat">
				<span>请先绑定手机号</span>
				<view class="icon_phone">
					<img  src="@/static/guess/iphone.png"/>
				</view>
				<view class="btn_wechat">
					<span @click="handlerClose">暂不绑定</span>
					<span @click="connectPhone">立即绑定</span>
				</view>
			</view>
		</view>
		<view class="modal_box" v-if="guideShow==3">
			<view class="yd2">
				<span>即将打开{{siteinfo.app_name}}APP，兑换商品！</span>
				<view class="icon">
					<img src="@/static/guess/prize_out.png" />
				</view>
				<view class="btn_wechat">
					<span class="" @click="handlerClose">取消</span>
					<span @click="handlerOpen">立即兑换</span>
				</view>
			</view>
		</view>
		<view class="modal_box" v-if="guideShow==4">
			<view class="yd">
				<span class="title">提示</span>
				<img :src="siteinfo.app_logo" ></img>
<!--				<span>当前活动仅在{{guide.platText}}平台进行，请前往参与！</span>-->
        <span>请前往APP平台参与活动</span>
				<view class="btn">
					<span @click="handlerOpen">下载/打开{{siteinfo.app_name}}</span>
				</view>
			</view>
			<img src="@/static/guess/close.png" @click="handlerClose">
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import {newJumpUrl} from '@/until/QFH5.js'
	export default{
		computed:{
			...mapGetters({qiniuUrl:'qiniuUrl',siteinfo:'siteinfo',guide:'guide',guideShow:'guideShow'}),
		},
		props:{
			data:{
				type:Object,
				default:()=>{return{}}
			}
		},
		data(){
			return{
		
			}
		},
		methods:{
			handlerClose(){
				this.$emit('close')
				this.$store.dispatch('setGuideShow',0)
				
			},
			handlerOpen(){
				let loactionUrl = window.location.href
				let actid = uni.getStorageSync('actid')|| null
				// if(loactionUrl.indexOf('&id=')==-1)//兼容其他页面打开app
				// 	loactionUrl = loactionUrl +"&id=" + actid
				if(loactionUrl.indexOf('id=')==-1){//兼容其他页面打开app
 					if( loactionUrl.indexOf('?')==-1){
                        loactionUrl =loactionUrl+"?id=" + actid
                    }else{
                        loactionUrl =loactionUrl+"&id=" + actid
                    }
                }
				let param = encodeURIComponent(loactionUrl)
				let url = newJumpUrl(0,param)
				window.location.href = url
			},
			connectWechat(){
				let _this = this
				QFH5.jumpBindThirdPlatform(3,function(){
					location.reload()
				})
			},
			connectPhone(){
				let _this = this
				QFH5.jumpBindMobile(function(){
					location.reload()
				})
			}
		}
	}
</script>

<style lang="scss">
	.bg_box{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,.7);
	}
	.modal_box{
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%,-40%);
		width: 750rpx;
		z-index: 99;
		&>img{
			margin: 89rpx 340rpx 0 340rpx;
			width: 70rpx;
			height: 70rpx;
		}
		.connect_wechat{
			position: relative;
			width: 640rpx;
			height: 590rpx;
			box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.2);
			background-color: #fff;
			border-radius: 30rpx;
			margin:0 auto;
			text-align: center;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			span{
				margin-top: 90rpx;
				display: block;
				font-size: 36rpx;
				line-height: 36rpx;
				font-weight: 400;
				font-family: PingFang SC-Regular, PingFang SC;
			}
			.icon{
				margin: 61rpx auto 0;
				line-height: 0;
				img{
					width: 144rpx;
					height: 117rpx;
					margin: 0 auto;
				}
			}
			.icon_phone{
				margin: 40rpx auto -7rpx;
				line-height: 0;
				img{
					width: 97rpx;
					height: 144rpx;
				}
			}
			.btn_wechat{
				margin-top: 78rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				width: 750rpx;
				height: 90rpx;
				span{
					display: block;
					width: 280rpx;
					height: 90rpx;
					border-radius: 43rpx;
					line-height: 90rpx;
					font-size: 36rpx;
					margin-top: 0;
					&:first-child{
						width: 278rpx;
						height: 88rpx;
						color: #FF3255;
						margin-left: 25rpx;
						border: 1px solid #FF3255;
					}
					&:last-child{
						background-color: #FF3255;
						margin-left: 30rpx;
						color: #fff;
					}
					&:active{
						opacity: 0.9;
					}
				}
			}
		}
		
		.yd{
			width: 600rpx;
			background-color: #fff;
			border-radius: 24rpx;
			padding: 40rpx 10rpx 50rpx;
			margin: 0 auto;
			text-align: center;
			overflow: hidden;
			&>span{
				padding: 20rpx 30rpx 0;
				display: block;
				text-align: center;
				width: 540rpx;
				min-height: 80rpx;
				font-size: 28rpx;
				line-height: 44rpx;
				font-weight: 400;
				font-family: PingFang SC-Regular, PingFang SC;
				&[class=title]{
					font-size: 36rpx;
					font-weight: 400;
				}
			}
			.btn{
				margin-top: 10rpx;
				span{
					margin: 0 auto;
					padding:14rpx 50rpx ;
					height: 70rpx;
					line-height: 70rpx;
					font-size: 30rpx;
					background-color: #FF3255;
					color: #fff;
					border-radius: 8rpx;
					&:active{
						opacity: 0.9;
					}
				}
			}
			&>img{
				width: 150rpx;
				height: 150rpx;
			}
		}
		.yd2{
			position: absolute;
			left: 50%;
			top: 50%;
			width: 640rpx;
			height: 590rpx;
			background-color: #fff;
			border-radius: 24rpx;
			transform: translate(-50%,-50%);
			// padding: 40rpx 0 0;
			text-align: center;
			overflow: hidden;
			&>span{
				// padding: 20rpx 30rpx 0;
				display: block;
				text-align: center;
				margin-top: 90rpx;
				line-height: 36rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
			}
			.icon{
				margin:  42rpx 0  71rpx;
				line-height: 0;
				img{
					width: 214rpx;
					height: 142rpx;
				}
			}
			.btn_wechat{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				width: 750rpx;
				height: 90rpx;
				span{
					display: block;
					width: 280rpx;
					height: 90rpx;
					border-radius: 43rpx;
					line-height: 90rpx;
					font-size: 36rpx;
					margin-top: 0;
					&:first-child{
						width: 278rpx;
						height: 88rpx;
						color: #FF3255;
						margin-left: 25rpx;
						border: 1px solid #FF3255;
					}
					&:last-child{
						background-color: #FF3255;
						margin-left: 30rpx;
						color: #fff;
					}
					&:active{
						opacity: 0.9;
					}
				}
			}
		}
	}
</style>